import React, { Component } from 'react';
import { Switch, message } from 'antd';
import _ from 'lodash';
import MessageSetting from './message-setting';
import { getNoticeConfig, modifyNoticeConfig } from '@api/noticeConfig';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import './index.less';

const prefixCls = 'notice-config';

const noticeList = [
  { key: 'taskStop', label: '任务终止' },
  { key: 'taskFailed', label: '任务失败' },
  { key: 'existVuls', label: '存在漏洞' },
  { key: 'highFinger', label: '高危指纹' },
  { key: 'siteModify', label: '资产变更' }
];

class NoticeConfig extends Component {
  constructor(props) {
    super(props);
    this.state = {
      noticeConfig: {},
      switchLoading: noticeList.reduce((target, notice) => {
        target[notice.key] = false;
        return target;
      }, {})
    };
  }

  componentDidMount() {
    getNoticeConfig().then(res => {
      const noticeConfig = _.get(res, 'data.data.notice_config', {});
      this.setState({ noticeConfig });
    });
  }

  onSwitchChange = (checked, type) => {
    let { noticeConfig, switchLoading } = this.state;
    noticeConfig[type] = checked;
    switchLoading[type] = true;
    this.setState({ noticeConfig, switchLoading });
    modifyNoticeConfig(noticeConfig)
      .then(() => {
        message.success('修改成功');
        switchLoading[type] = false;
        this.setState({ switchLoading });
      })
      .catch(() => {
        message.error('修改失败');
        noticeConfig[type] = !checked;
        switchLoading[type] = false;
        this.setState({ noticeConfig, switchLoading });
      });
  };

  render() {
    const { noticeConfig, switchLoading } = this.state;
    const { modules = [] } = this.props;
    const hasOneDayModule = modules.includes('1day');
    let filterNoticeList = noticeList;
    if (!hasOneDayModule) {
      filterNoticeList = noticeList.filter(notice => notice.key !== 'existVuls');
    }
    return (
      <div className={prefixCls}>
        <MessageSetting />
        <div className={`${prefixCls}-page-title`}>提醒项设置</div>
        <div className={`${prefixCls}-manage-box`}>
          <div className={'box-title'}>
            <div>提醒项</div>
            <div>邮件</div>
          </div>
          {filterNoticeList.map(notice => {
            const { key, label } = notice;
            const status = noticeConfig[key];
            return (
              <div className={'box-item'} key={key}>
                <div className={status ? '' : 'uncheck'}>{label}</div>
                <div>
                  <Switch
                    checked={status}
                    onChange={checked => this.onSwitchChange(checked, key)}
                    loading={switchLoading[key]}
                  />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

NoticeConfig.propTypes = {
  modules: PropTypes.array
};

const mapStateToProps = state => {
  return {
    modules: _.get(state, 'auth.cert.modules', [])
  };
};

export default connect(
  mapStateToProps,
  null
)(NoticeConfig);
// export default NoticeConfig;
